<template>
  <div class="holiday-main">
    <div class="header">
      <div class="header_left">
        <div class="header_left_title">
          {{$t("holidays.title")}}
        </div>
        <div class="header_left_desc">
          {{$t("holidays.titleDesc")}}
        </div>
      </div>
      <div class="header_right">
        <ZSPlitButton :title='$t("holidays.addIcons")'
                      plain
                      size="small"
                      type="primary"
                      :disabled="false"
                      :disabled-0="false"
                      @click="handleItem('add')"
                      @command="commandType"
                      :options="addTypeList" />
      </div>
    </div>
    <div class="list">
      <el-table :data="tableData"
                border
                v-loading="loading"
                :height="tableHeight"
                style="width: 100%;height:70%">
        <el-table-column prop="name"
                         :label="$t('holidays.name')">
        </el-table-column>
        <el-table-column prop="description"
                         :label="$t('holidays.desc')">
        </el-table-column>
        <el-table-column :label="$t('holidays.action')"
                         width="120">
          <template slot-scope="scope">
            <el-tooltip v-delTabIndex effect="dark"
                        :content="$t('holidays.edit')"
                        placement="top">
              <i @click="handleItem('edit',scope.row)"
                 style="padding:0 10px;cursor: pointer;user-select: none;"
                 class="el-icon-edit"></i>
            </el-tooltip>
            <el-tooltip v-delTabIndex effect="dark"
                        :content="$t('holidays.delete')"
                        placement="top">
              <i @click="handleItem('delete',scope.row)"
                 style="padding:0 10px;cursor: pointer;user-select: none;"
                 class="el-icon-delete"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[10, 50, 100, 1000]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <AddDialog ref="addDialog"
               @editHolidays="editHolidays" />
    <AddTDialog ref="addTDialog"
                @selectHolidays="selectHolidays" />
  </div>
</template>

<script>
import AddDialog from './addDialog'
import AddTDialog from './addTDialog'
import ZSPlitButton from '@/components/storybook/z-split-button/index'

export default {
  components: {
    AddDialog,
    AddTDialog,
    ZSPlitButton
  },
  data () {
    return {
      currentPage: 1,
      loading: false,
      pageSize: 10,
      total: 0,
      tableData: [],
      tableHeight: "300px",
      addType: 0,
      addTypeList: [
        {
          label: 'Template',
          value: 1
        },
      ]
    }
  },
  created () {
    this.getList()
    this.getTableHeight()
  },

  methods: {
    async editHolidays (form) {
      this.loading = true
      this.$refs.addDialog['dialogVisible'] = false
      const params = {
        ...form
      }
      const { data: res } = form.id ? await this.$interface.taskManager.holidayUpdate(params) : await this.$interface.taskManager.holidayAdd(params)
      if (res.code !== 0) {
        this.loading = false
        return this.$message.error(res.message)
      }
      this.$message.success(form.id ? 'Edit success.' : 'Add success.')
      this.getList()
    },
    async selectHolidays (templateId) {
      this.loading = true
      this.$refs.addTDialog['dialogVisible'] = false
      const params = {
        templateId
      }
      const { data: res } = await this.$interface.taskManager.holidayCopy(params)
      if (res.code !== 0) {
        this.loading = false
        return this.$message.error(res.message)
      }
      this.$message.success('Add success.')
      this.getList()
    },
    commandType (command) {
      this.$refs.addTDialog['dialogVisible'] = true
    },
    getTableHeight () {
      this.tableHeight = document.querySelector('body').offsetHeight - 370 + 'px'
      if (parseInt(this.tableHeight) < 0) {
        setTimeout(() => {
          this.getTableHeight()
        }, 300);
      }
    },
    handleItem (type, item) {
      switch (type) {
        case 'add':
          this.addItem()
          break;
        case 'edit':
          this.editItem(item)
          break;
        case 'delete':
          this.deleteItem(item)
          break;
      }
    },
    addItem () {
      this.$refs.addDialog['form'] = {
        festivalList: [],
      }
      this.$refs.addDialog['dialogVisible'] = true
    },
    editItem (item) {
      this.$refs.addDialog['form'] = {
        ...item,
        festivalList: item.festivalList ? item.festivalList : [],
        delIds: []
      }
      this.$refs.addDialog['dialogVisible'] = true
    },
    async deleteItem (item) {
      const params = {
        id: item.id
      }
      const { data: result } = await this.$interface.taskManager.holidayValid(params)
      if (result.data) {
        return this.$msgbox({
          title: this.$t("prompt.title"),
          message: this.$t('holidays.deleteTip'),
          type: "warning",
        })
      }
      const res = await this.$msgbox({
        title: this.$t("prompt.title"),
        message: this.$t('holidays.deleteTips'),
        confirmButtonText: this.$t('holidays.confirm'),
        cancelButtonText: this.$t('holidays.cancel'),
        showCancelButton: true,
        type: "warning",
      })
      if (res === 'confirm') {
        this.loading = true
        const { data: res } = await this.$interface.taskManager.holidayDel(params)
        this.loading = false
        if (res.code !== 0) {
          return this.$message.error(res.message)
        }
        this.$message.success('Delete success.')
        this.getList()
      }
    },
    async getList () {
      this.loading = true
      const params = {
        size: this.pageSize,
        current: this.currentPage
      }
      const { data: res } = await this.$interface.taskManager.holidayList(params)
      this.loading = false
      if (res.code !== 0) {
        return this.$message.error(res.message)
      }
      if (res.data.records) {
        this.tableData = res.data.records
        this.total = +res.data.total
      }
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getList()
    },

  }
}
</script>

<style lang="scss" scoped>
.holiday-main {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #dde1e6;
    &_left {
      margin-right: 20px;
      &_title {
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.9);
        line-height: 24px;
      }
      &_desc {
        color: rgba(0, 0, 0, 0.61);
        line-height: 16px;
        font-size: 12px;
      }
    }
  }
}
</style>